<!--
 * @LastEditors: yuSeen
 * @LastEditTime: 2021-11-18 10:29:00
 * 天凉好个秋
-->
<template>
  <div>
    <div class="item">
      <div class="tit">跳转方式：</div>
      <div class="input">
        <div class="input-line">
          <span class="sp1">
            <em class="radio" :class="{'on': !link.skip}" @click="link.skip = false"></em> 不跳转
          </span>
          <span class="sp1">
            <em class="radio" :class="{'on': link.skip}" @click="link.skip = true"></em> 自定义
          </span>
        </div>
        <div class="input-line" v-if="link.skip">
          <div class="tit">
            <el-button type="primary" @click="openLink" icon="el-icon-link">设置跳转</el-button>
          </div>
          <div class="input">
            <input
              type="text"
              readonly="readonly"
              class="intxt"
              :value="link.name"
              placeholder="请设置导航链接"
            />
          </div>
        </div>
      </div>
    </div>

    <!--设置连接弹窗-->
    <transition name="mask">
      <div class="comm-mask" v-if="showSiteLink"></div>
    </transition>
    <transition name="scale">
      <SiteLink v-if="showSiteLink" />
    </transition>
  </div>
</template>

<script>
import SiteLink from "@/views/attr/siteLink.vue";
export default {
  name: "setLinkAttr",
  props: {
    link: { type: Object },
  },
  components: { SiteLink },
  data() {
    return {
      showSiteLink: false,
    };
  },
  mounted() {
    console.log(this.link, 999);
  },
  methods: {
    openLink() {
      this.showSiteLink = true;
    },
  },
};
</script>
